<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 需要导入转换之后的代码, 需要屏蔽兼容性 -->
    <!-- <script src="./index.js"></script> -->
    <!-- main.js是通过webpack转换之后输出的, 已解决兼容性问题 -->
    <!-- <script src="../dist/main.js"></script> -->
    <!-- <script src="../dist_1/bundle.js"></script> -->
</head>

<body>
    <input type="text" placeholder="ceshi">
    <ul>
        <li>这是第1个li</li>
        <li>这是第2个li</li>
        <li>这是第3个li</li>
        <li>这是第4个li</li>
        <li>这是第5个li</li>
        <li>这是第6个li</li>
        <li>这是第7个li</li>
        <li>这是第8个li</li>
        <li>这是第9个li</li>
    </ul>
    <div id="box"></div>
    <!-- 将来要被vue控制的区域 -->
    <div id="app"></div>
    <!-- 
        总结

        首先安装webpack相关的包，第二步创建webpack的配置文件，第三步在配置文件中
        新增一个配置节点，里面有个属性叫mode，它的这个编译模式为development，那
        最后呢，我们需要创建一个package.json里面一个dev脚本，它的这个脚本指令叫做
        webpack，然后我们运行npm run dev指令就可以进行打包，并且把咱们打包好的文件
        输出到dist的目录下的main.js中，那刚才我们说了。在webpack配置文件中的这个
        mode选项，除了可以指定development，还可以指定production.
     -->
</body>

</html>